<template>
  <div>
    <el-table
      v-loading
      :data="pageData.list"
      :row-key="(row) => row.id "
      border
      fit
      highlight-current-row
      height="420"
      style="width: 100%"
      stripe
      :header-cell-style="{ background: '#ededed' }"
      @selection-change="change"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="col in pageColums"
        :key="col.propName"
        :prop="col.propName"
        :label="col.label"
        min-width="65px"
        align="center"
      >
        <template slot-scope="scope">
          <el-link v-if="col.isLink" :underline="false" @click="col.linkHanlder(scope.row)">{{ scope.row[col.propName] }}</el-link>
          <span v-else>{{ scope.row[col.propName] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageInfo.pageNum"
      :total="pageInfo.total"
      :page-sizes="[10,20,50]"
      :page-size="pageInfo.pageSize"
      background
      layout="prev, pager, next, sizes, total, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script>
export default {
  name: 'PaginatedTable',
  // props: ['pageColums', 'pageData', 'selectionChangeHandler'],
  props: {
    pageColums: {
      type: Array,
      required: true
    },
    pageData: {
      type: Object,
      required: true
    },
    selectionChangeHandler: {
      type: Function,
      required: false,
      default: () => {}
    }
  },
  data() {
    return {
    //   pageColums: [
    //     { label: '姓名', propName: 'name' },
    //     { label: '年龄', propName: 'age' }
    //   ],
    //   pageData: {
    //     pageInfo: {
    //       pageNum: 1, // 当前页
    //       pageSize: 5, // 每页行数
    //       total: 9 // 列表总行数
    //     },
    //     list: [ // 数据列表
    //       { name: '111', age: 14 },
    //       { name: '111', age: 15 },
    //       { name: '111', age: 16 },
    //       { name: '111', age: 17 },
    //       { name: '111', age: 18 },
    //       { name: '111', age: 19 },
    //       { name: '111', age: 20 },
    //       { name: '111', age: 21 },
    //       { name: '111', age: 22 }
    //     ]
    //   }
    }
  },
  computed: {
    pageInfo() {
      return this.pageData.pageInfo
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 列表数据
    getData() {

    },
    // 分页
    // 每页条数切换
    handleSizeChange: function(pageSize) {
      this.pageData.pageInfo.pageSize = pageSize
      this.$emit('table-change', this.pageInfo)
    },
    // 页码切换
    handleCurrentChange: function(currentPage) {
      this.pageData.pageInfo.pageNum = currentPage
      this.$emit('table-change', this.pageInfo)
    },
    change(rows) {
      this.selectionChangeHandler(rows)
      this.$emit('select-change', rows)
    }
  }

}
</script>

<style>

</style>
